<!doctype html>
<html lang="zh">

<head>
  <title>Top App Bar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet">
  <style>
    body {
      font-family: Roboto;
    }
    .container {
      display: flex;
      flex-direction: column;
      position: relative;
      width: 667px;
      height: 375px;
      overflow: hidden;
      box-shadow: 0 0.85px 3px 0 rgba(0, 0, 0, 19%), 0 0.25px 1px 0 rgba(0, 0, 0, 3.9%);
    }
    @media (min-width: 667px) {
      mdui-top-app-bar {
        width: 667px;
      }
    }
    @media (max-width: 666px) {
      .container {
        width: 100%;
      }
    }
  </style>
  <script type="module">
    import '../../packages/mdui/mdui.css';
    import '../../packages/mdui/components/top-app-bar.js';
    import '../../packages/mdui/components/top-app-bar-title.js';
    import '../../packages/mdui/components/button-icon.js';
    import '../../packages/mdui/components/button.js';
    import '../../packages/mdui/components/segmented-button-group.js';
    import '../../packages/mdui/components/segmented-button.js';
    import '../../packages/mdui/components/avatar.js';
    import '../../packages/mdui/components/dropdown.js';
    import '../../packages/mdui/components/menu.js';
    import '../../packages/mdui/components/menu-item.js';
    import { $ } from '../../packages/jq/index.js';

    // variant 值切换
    $('body').on('change', function(e) {
      if (e.target.tagName.toLowerCase() === 'mdui-segmented-button-group') {
        $(e.target).parents('section').find('mdui-top-app-bar')[0].variant = e.target.value;
      }
    });

    // 填充 variant 切换按钮
    $('.fill-variant-change-button').append(`<mdui-segmented-button-group value="center-aligned" selects="single" class="change-variant">
        <mdui-segmented-button value="center-aligned">center-aligned</mdui-segmented-button>
        <mdui-segmented-button value="small">small</mdui-segmented-button>
        <mdui-segmented-button value="medium">medium</mdui-segmented-button>
        <mdui-segmented-button value="large">large</mdui-segmented-button>
      </mdui-segmented-button-group>`);

    // 填充占位文本
    $('.fill-placeholder').append(...Array.from({length: 100}, (_, index) => index + 1).map(item => `<p>${item}</p>`));
  </script>
</head>

<body>
  <main>
    <section>
      <h2>center-aligned</h2>
      <mdui-top-app-bar variant="center-aligned" style="position: relative;">
        <mdui-button-icon icon="menu"></mdui-button-icon>
        <mdui-top-app-bar-title>Title Large</mdui-top-app-bar-title>
        <div style="flex-grow: 1"></div>
        <mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
      </mdui-top-app-bar>
    </section>

    <section>
      <h2>small</h2>
      <mdui-top-app-bar variant="small" style="position: relative;">
        <mdui-button-icon icon="menu"></mdui-button-icon>
        <mdui-top-app-bar-title>Title Large</mdui-top-app-bar-title>
        <div style="flex-grow: 1"></div>
        <mdui-button-icon icon="attach_file"></mdui-button-icon>
        <mdui-button-icon icon="today"></mdui-button-icon>
        <mdui-button-icon icon="more_vert"></mdui-button-icon>
      </mdui-top-app-bar>
    </section>

    <section>
      <h2>medium</h2>
      <mdui-top-app-bar variant="medium" style="position: relative;">
        <mdui-button-icon icon="menu"></mdui-button-icon>
        <mdui-top-app-bar-title>Headline Small</mdui-top-app-bar-title>
        <div style="flex-grow: 1"></div>
        <mdui-button-icon icon="attach_file"></mdui-button-icon>
        <mdui-button-icon icon="today"></mdui-button-icon>
        <mdui-button-icon icon="more_vert"></mdui-button-icon>
      </mdui-top-app-bar>
    </section>

    <section>
      <h2>large</h2>
      <mdui-top-app-bar variant="large" style="position: relative;">
        <mdui-button-icon icon="menu"></mdui-button-icon>
        <mdui-top-app-bar-title>Headline Medium</mdui-top-app-bar-title>
        <div style="flex-grow: 1"></div>
        <mdui-button-icon icon="attach_file"></mdui-button-icon>
        <mdui-button-icon icon="today"></mdui-button-icon>
        <mdui-button-icon icon="more_vert"></mdui-button-icon>
      </mdui-top-app-bar>
    </section>

    <section>
      <h2>with overflow menu</h2>
      <mdui-top-app-bar variant="center-aligned" style="position: relative;">
        <mdui-button-icon icon="menu"></mdui-button-icon>
        <mdui-top-app-bar-title>Title Large</mdui-top-app-bar-title>
        <div style="flex-grow: 1"></div>
        <mdui-button-icon icon="attach_file"></mdui-button-icon>
        <mdui-button-icon icon="today"></mdui-button-icon>
        <mdui-dropdown>
          <mdui-button-icon icon="more_vert" slot="trigger"></mdui-button-icon>
          <mdui-menu>
            <mdui-menu-item>Settings</mdui-menu-item>
            <mdui-menu-item>Send Feedback</mdui-menu-item>
            <mdui-menu-item>Help</mdui-menu-item>
          </mdui-menu>
        </mdui-dropdown>
      </mdui-top-app-bar>
    </section>

    <section>
      <h2>no scroll-target & scroll-behavior="hide" & default position:fixed</h2>
      <mdui-top-app-bar scroll-behavior="hide" style="z-index: 999">
        <mdui-button-icon icon="menu"></mdui-button-icon>
        <mdui-top-app-bar-title>Title Large</mdui-top-app-bar-title>
        <div style="flex-grow: 1"></div>
        <mdui-button-icon icon="attach_file"></mdui-button-icon>
        <mdui-button-icon icon="today"></mdui-button-icon>
        <mdui-button-icon icon="more_vert"></mdui-button-icon>
      </mdui-top-app-bar>
      <div class="fill-variant-change-button"></div>
    </section>

    <section>
      <h2>scroll-behavior="elevate"</h2>
      <div class="container">
        <mdui-top-app-bar scroll-target="#elevate" scroll-behavior="elevate">
          <mdui-button-icon icon="menu"></mdui-button-icon>
          <mdui-top-app-bar-title>Title Large</mdui-top-app-bar-title>
          <div style="flex-grow: 1"></div>
          <mdui-button-icon icon="attach_file"></mdui-button-icon>
          <mdui-button-icon icon="today"></mdui-button-icon>
          <mdui-button-icon icon="more_vert"></mdui-button-icon>
        </mdui-top-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="elevate">
          <div class="fill-placeholder"></div>
        </div>
      </div>
      <br/>
      <div class="fill-variant-change-button"></div>
    </section>

    <section>
      <h2>scroll-behavior="hide"</h2>
      <div class="container">
        <mdui-top-app-bar scroll-target="#hide" scroll-behavior="hide">
          <mdui-button-icon icon="menu"></mdui-button-icon>
          <mdui-top-app-bar-title>Title Large</mdui-top-app-bar-title>
          <div style="flex-grow: 1"></div>
          <mdui-button-icon icon="attach_file"></mdui-button-icon>
          <mdui-button-icon icon="today"></mdui-button-icon>
          <mdui-button-icon icon="more_vert"></mdui-button-icon>
        </mdui-top-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="hide">
          <div class="fill-placeholder"></div>
        </div>
      </div>
      <br/>
      <div class="fill-variant-change-button"></div>
    </section>

    <section>
      <h2>scroll-behavior="hide" & scroll-threshold</h2>
      <div class="container">
        <mdui-top-app-bar scroll-threshold="80" scroll-target="#hide-threshold" scroll-behavior="hide">
          <mdui-button-icon icon="menu"></mdui-button-icon>
          <mdui-top-app-bar-title>Title Large</mdui-top-app-bar-title>
          <div style="flex-grow: 1"></div>
          <mdui-button-icon icon="attach_file"></mdui-button-icon>
          <mdui-button-icon icon="today"></mdui-button-icon>
          <mdui-button-icon icon="more_vert"></mdui-button-icon>
        </mdui-top-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="hide-threshold">
          <div class="fill-placeholder"></div>
        </div>
      </div>
      <br/>
      <div class="fill-variant-change-button"></div>
    </section>

    <section>
      <h2>scroll-behavior="shrink"</h2>
      <div class="container">
        <mdui-top-app-bar scroll-target="#shrink" scroll-behavior="shrink">
          <mdui-button-icon icon="menu"></mdui-button-icon>
          <mdui-top-app-bar-title>Hiking Trips with Elie in Santa Monica and Joshua Tree!</mdui-top-app-bar-title>
          <div style="flex-grow: 1"></div>
          <mdui-button-icon icon="attach_file"></mdui-button-icon>
          <mdui-button-icon icon="today"></mdui-button-icon>
          <mdui-button-icon icon="more_vert"></mdui-button-icon>
        </mdui-top-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="shrink">
          <div class="fill-placeholder"></div>
        </div>
      </div>
      <br/>
      <div class="fill-variant-change-button"></div>
    </section>

    <section>
      <h2>scroll-behavior="shrink" & scroll-threshold</h2>
      <div class="container">
        <mdui-top-app-bar scroll-threshold="80" scroll-target="#shrink-threshold" scroll-behavior="shrink">
          <mdui-button-icon icon="menu"></mdui-button-icon>
          <mdui-top-app-bar-title>Hiking Trips with Elie in Santa Monica and Joshua Tree!</mdui-top-app-bar-title>
          <div style="flex-grow: 1"></div>
          <mdui-button-icon icon="attach_file"></mdui-button-icon>
          <mdui-button-icon icon="today"></mdui-button-icon>
          <mdui-button-icon icon="more_vert"></mdui-button-icon>
        </mdui-top-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="shrink-threshold">
          <div class="fill-placeholder"></div>
        </div>
      </div>
      <br/>
      <div class="fill-variant-change-button"></div>
    </section>

    <section>
      <h2>scroll-behavior="shrink elevate"</h2>
      <div class="container">
        <mdui-top-app-bar scroll-target="#shrink-elevate" scroll-behavior="shrink elevate">
          <mdui-button-icon icon="menu"></mdui-button-icon>
          <mdui-top-app-bar-title>Hiking Trips with Elie in Santa Monica and Joshua Tree!</mdui-top-app-bar-title>
          <div style="flex-grow: 1"></div>
          <mdui-button-icon icon="attach_file"></mdui-button-icon>
          <mdui-button-icon icon="today"></mdui-button-icon>
          <mdui-button-icon icon="more_vert"></mdui-button-icon>
        </mdui-top-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="shrink-elevate">
          <div class="fill-placeholder"></div>
        </div>
      </div>
      <br/>
      <div class="fill-variant-change-button"></div>
    </section>

    <section>
      <h2>label-large slot</h2>
      <div class="container">
        <mdui-top-app-bar scroll-target="#label-large" scroll-behavior="shrink elevate">
          <mdui-button-icon icon="menu"></mdui-button-icon>
          <mdui-top-app-bar-title>
            Title
            <span slot="label-large">Hiking Trips with Elie in Santa Monica and Joshua Tree!</span>
          </mdui-top-app-bar-title>
          <div style="flex-grow: 1"></div>
          <mdui-button-icon icon="attach_file"></mdui-button-icon>
          <mdui-button-icon icon="today"></mdui-button-icon>
          <mdui-button-icon icon="more_vert"></mdui-button-icon>
        </mdui-top-app-bar>
        <div style="max-height: 100%; overflow: auto; box-sizing: border-box" id="label-large">
          <div class="fill-placeholder"></div>
        </div>
      </div>
      <br/>
      <div class="fill-variant-change-button"></div>
    </section>

  </main>
</body>

</html>
